<template>
    <el-container >
        <el-header class="duration-700 dark:bg-gray-700 dark:text-white" height="54px">
            <header>
                <div class="resources">
                            <span @click="dialogVisibleFolder=true">
                                新建文件夹
                            </span>
                            <span @click="downloadAll">
                                导出全部
                            </span>
                    <transition name="fade">
                        <NewFolder v-show="dialogVisibleFolder" :setDialogVisible="setDialogVisible"/>
                    </transition>
                </div>
                <span @click="setDark">暗黑模式</span>
            </header>
        </el-header>
        <el-main class="duration-700 dark:bg-gray-700 dark:text-white">
            <div class="Cloud">
                <main>
                    <div class="folder" @click="setActiveName(item,index.files.length)" v-for="(index,item) in cloud.data">
                        <div class="name" :class="[activeName === item?'name-a':'']">
                            <div class="left">
                                <span>{{ index.name }}</span>
                                <span @click.stop="openDialogFormVisible(index.name)"><el-icon size="19"><Upload/></el-icon></span>
                                <span @click.stop="delFolder(index.name)"><el-icon size="18"><Delete/></el-icon></span>
                            </div>
                            <span><el-icon><ArrowRightBold/></el-icon></span>
                        </div>
                        <div class="files" :class="[activeName === item?'files-a':'']" @click.stop>
                            <div class="file" v-for="(index_a,item) in index.files">
                                <span>{{index_a.name}}</span>
                                <span @click.stop="downloadChecked(index_a.url,index_a.name)"><el-icon size="18"><Download /></el-icon></span>
                                <span @click.stop="delFile(index.name,index_a)"><el-icon size="18"><Delete/></el-icon></span>
                            </div>
                        </div>
                    </div>

                    <el-dialog v-model="dialogFormVisible" title="上传文件">
                        <el-upload
                            class="upload-demo"
                            :action="server.ghyComputerIp +'cloud/upload'"
                            multiple
                            :data="uploadData"
                            :headers="headers"
                            :drag="true"
                        >
                            <button>选择文件</button>
                            <div>点击上方按钮或直接将文件拖入方框中</div>
                            <template #tip>
                                <div class="el-upload__tip">
                                    如遇无法上传请压缩为zip , 更多问题请联系我们
                                </div>
                            </template>
                        </el-upload>
                        <template #footer>
                    <span class="dialog-footer">
                        <button @click="dialogFormVisible = false">关闭</button>
                    </span>
                        </template>
                    </el-dialog>

                </main>
            </div>
        </el-main>
    </el-container>

</template>

<script setup>
import { computed, reactive, ref, watch } from "vue";
import { useCloudStore } from "@/stores/cloud/cloud";
import { useDarkStore } from "@/stores/darkMode/darkMode";
import workApi from "@/http/work/workApi";
import NewFolder from "@/components/dialog/NewFolder.vue";
import { useServerStore } from "@/stores/server/server";
const dark = useDarkStore()
const server = useServerStore()
let dialogVisibleFolder = ref(false)        // 创建文件夹---对话框
function setDialogVisible() {  // 关闭全部对话框
    dialogVisibleFolder.value = false
}
function setDark() {
    dark.setDark()
}


// 获取资源库数据
const cloud = useCloudStore()
cloud.setData()

// 点击展开文件夹
const activeName = ref()
let filesHeight = ref()

function setActiveName(number, len) {
    if (activeName.value === number) {
        activeName.value = "";
        filesHeight.value = "0"
    } else {
        activeName.value = number;
        filesHeight.value = (len * 50) + "px"
    }

}

// 下载文件
function downloadChecked(dowUrl,name){
    let a = document.createElement("a"); //创建一个<a></a>标签
    a.href = dowUrl; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
    a.download = name; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
    a.style.display = "none"; // 障眼法藏起来a标签
    document.body.appendChild(a); // 将a标签追加到文档对象中
    a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
    a.remove(); // 一次性的，用完就删除a标签
}
// 上传文件
let dialogFormVisible = ref(false)
// 监视
watch(()=>[dialogFormVisible.value,],()=>{
    cloud.setData()
    console.log("更新数据")
})

const headers = {
    "token":localStorage.getItem('token')
}
function openDialogFormVisible(folderName){
    uploadData.folder = folderName
    dialogFormVisible.value = true
}
const uploadData = reactive({
    folder:""
})
// 删除文件夹 与 删除文件
function delFolder(folder){
    workApi.delete("cloud/delete",{
        data:{
            folder:folder
        }
    }).then(()=>{
        cloud.setData()
    })
}
function delFile(folder,file){
    workApi.delete("cloud/delete_file",{
        data:{
            folder:folder,
            name:file.name
        }
    }).then(()=>{
        cloud.setData()
    })
}
// 调节文件夹与文件的背景色
let hoverBackground = computed(()=>{
    return dark.dark?"rgba(255,255,255,0.06)":"rgba(0,0,0,0.04)"
})

// 下载全部
function downloadAll(){
    console.log("开始压缩咯")
    workApi.post("/cloud/download_zip").then((res)=>{
        if (res["msg"]) {
            console.log("开始下载",res)
            downloadChecked(res["url"],res["name"])
        }
    })
}
</script>

<style scoped lang="less">
header {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
    padding-left: 20px;
    border-bottom: 1px solid rgb(#dddddd);
    color: #9ba8c5;

    span {
        display: inline-block;
        height: 53px;
        margin-right: 50px;
        font-size: 16px;
        font-weight: 400;
        line-height: 53px;

        &:hover {
            color: #4f95f5;
            cursor: pointer;
        }
    }

    .class {
        flex: 10;

        > div {
            display: inline-block;
        }

        .left {
            .top-choose {
                color: #4f95f5;
            }

            &::before {
                content: "";
                position: absolute;
                left: 35px;
                bottom: 0;
                width: 34px;
                height: 4px;
                background-color: #4f95f5;
                transition: all 0.2s;
            }
        }

        .left--1 {
            &::before {
                left: 150px;
            }
        }

        .right {
            height: 53px;
            float: right;

        }
    }
}


.Cloud{
    width: 100%;
    >main {
        width: 80%;
        margin: auto;
        .folder {
            padding: 0 50px;
            line-height: 50px;
            border-bottom: 1px solid #dddddd;
            transition: 0.4s;
            &:hover{
                background-color: v-bind(hoverBackground);
            }
            .name {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left {
                    display: flex;
                    justify-content: center;

                    span:nth-child(1) {
                        width: 97px;
                        overflow: hidden; // 溢出隐藏
                        white-space: nowrap;
                        text-overflow: ellipsis; // 溢出省略号
                        margin-right: 100px;
                    }

                    span:nth-child(n+2) {
                        width: 30px;

                        &:hover {
                            color: #4f95f5;
                        }
                    }
                }
                &-a{
                    > span:nth-child(2) {
                        transform: rotate(90deg);
                    }
                }

            }
            .files {
                height: 0;
                transition: 0.3s;
                overflow: hidden;

                .file {
                    display: flex;
                    padding: 0 0 0 20px;
                    border-bottom: 1px solid #dddddd;
                    transition: 0.3s;
                    &:hover{
                        background-color: v-bind(hoverBackground);
                    }
                    span:nth-child(1){
                        width: 150px;
                        overflow: hidden; // 溢出隐藏
                        white-space: nowrap;
                        text-overflow: ellipsis; // 溢出省略号
                        margin-right: 27px;
                    }
                    span:nth-child(2){
                        margin-right: 12px;
                    }
                }
                &-a {
                    height: v-bind(filesHeight);
                }

            }



            span:nth-child(n+2) {
                display: flex;
                flex-direction: row;
                align-items: center;
                transition: 0.2s;
            }

            &:nth-child(1) {
                border-top: 1px solid #dddddd;
            }
        }



        .el-dialog{
            .el-upload{
                button{
                    color: white;
                    padding: 10px;
                    margin-bottom: 20px;
                    border-radius: 5px;
                    background-color: #409eff;
                }
            }
        }
    }
}

</style>